<template>
  <div style="display:inline">
    <el-select v-model="selectedOptions " @clear="clearValue" :clearable='clearable' v-if="showList" class="my-el-select">
      <el-option
        v-for="(item, index) in showList"
        :key="index"
        :disabled="disabled"
        :label="item[valueName]"
        :value="item[labelName]">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      default: null
    },
    showList: {
    },
    valueName: {
      default: 'label'
    },
    labelName: {
      default: 'value'
    },
    clearable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedOptions: this.value
    }
  },
  methods: {
    clearValue() {
      this.selectedOptions = null;
    },
  },
  watch: {
    value(newVal) {
      this.selectedOptions = newVal
    },
    selectedOptions(newVal, oldVal) {
      this.$emit('input', this.selectedOptions)
    }
  }
}
</script>
<style scoped>
  /*/deep/ .my-el-select {*/
  /*  margin-left: 10px;*/
  /*  width: 120px;*/
  /*  .el-input__inner{*/
  /*    height: 30px !important*/
  /*  }*/
  /*  .el-input__suffix {*/
  /*    top: 5px;*/
  /*  }*/
  /*  .el-input__icon {*/
  /*    line-height: inherit*/
  /*  }*/
  /*  .el-input__suffix-inner {*/
  /*    display: inline-block*/
  /*  }*/
  /*  .el-icon-arrow-up {*/
  /*    line-height: 0px !important;*/
  /*  }*/
  /*}*/
</style>

<!--<SelfSelect v-model="showRoadCode" :showList="roadlist" valueName='roadName' labelName='roadCode'> </SelfSelect>-->

